<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
</head>

<body>
    <div data-ng-app="myApp">
        <div data-ng-controller="myCtrl">
            <h1>My Carname:{{carname}}</h1>
            <p>
                <input type="text" data-ng-model="name" />
                <button data-ng-click="sayHello()">Greeing</button>
                <span>{{greeting}}</span>
            </p>
            <ul>
                <li data-ng-repeat="x in names">{{x}}</li>
            </ul>
            <p>lastName:{{lastName}}</p>
        </div>
        <div data-ng-controller="myCtrl2">
            <span>lastName in myCtrl2 scope:{{lastName2}}</span><br />
            <span>lastName in rootScope:{{$root.lastName}}</span>
        </div>
    </div>
    <script src="../node_modules/angular/angular.min.js"></script>
    <script type="application/javascript">
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope, $rootScope) {
            $scope.carname = 'Volvo';
            $scope.name = 'yyh';
            $scope.sayHello = function() {
                $scope.greeting = 'Hello ' + $scope.name + '!';
            };
            $scope.names = ["Emil", "Tobias", "Linus"];
            $rootScope.lastName = 'hehe';
        });
        app.controller('myCtrl2', function($scope, $rootScope) {
            $scope.lastName2 = $rootScope.lastName;
        });

    </script>
</body>

</html>
